<template>
  <div class="home-dashboard">
    <h2>智能健身衣平台总览</h2>
    <div class="overview-grid">
      <div class="overview-item">
        <div class="overview-title">总用户数</div>
        <div class="overview-value">{{ overview.totalUsers }}</div>
        <div class="overview-desc">总用户量</div>
      </div>
      <div class="overview-item">
        <div class="overview-title">活跃设备</div>
        <div class="overview-value">{{ overview.activeDevices }}</div>
      </div>
    </div>
    <div class="charts-row">
      <div class="chart-card">
        <div class="chart-title">设备状态分布</div>
        <div class="pie-legend">
          <span style="color:#42b983">●</span> 正常运行 {{ deviceStatus.normal }}%
          <span style="color:#ff5252">●</span> 空闲中 {{ deviceStatus.idle }}%
        </div>
        <svg width="90" height="90" viewBox="0 0 90 90">
          <circle r="36" cx="45" cy="45" fill="#eee" />
          <!-- 只保留正常运行和空闲中的状态 -->
          <circle r="36" cx="45" cy="45" fill="none" stroke="#42b983" stroke-width="18"
            :stroke-dasharray="(deviceStatus.normal/100*2*Math.PI*36).toFixed(1) + ' ' + (2*Math.PI*36-(deviceStatus.normal/100*2*Math.PI*36)).toFixed(1)"
            stroke-dashoffset="0" />
          <circle r="36" cx="45" cy="45" fill="none" stroke="#ff5252" stroke-width="18"
            :stroke-dasharray="(deviceStatus.idle/100*2*Math.PI*36).toFixed(1) + ' ' + (2*Math.PI*36-(deviceStatus.idle/100*2*Math.PI*36)).toFixed(1)"
            :stroke-dashoffset="-(deviceStatus.normal/100*2*Math.PI*36)" />
          <g font-size="11" fill="#888">
            <text x="45" y="30">正常</text>
            <text x="45" y="60">空闲</text>
          </g>
        </svg>
      </div>
    </div>
    <div class="charts-row">
      <div class="chart-card" style="flex:2;min-width:320px;">
        <div class="chart-title">年龄性别分布</div>
        <svg width="260" height="180" viewBox="0 0 260 180">
          <g v-for="(group, i) in ageGenderGroups" :key="group.age">
            <rect :x="i*55+40" :y="160-group.male*1.2" width="18" :height="group.male*1.2" fill="#42b983" />
            <rect :x="i*55+62" :y="160-group.female*1.2" width="18" :height="group.female*1.2" fill="#ffb300" />
            <text :x="i*55+49" y="175" text-anchor="middle" font-size="12" fill="#888">{{ group.age }}</text>
            <text :x="i*55+49" :y="160-Math.max(group.male, group.female)*1.2-8" text-anchor="middle" font-size="11" fill="#42b983">{{ group.male }}/{{ group.female }}</text>
          </g>
          <text x="70" y="20" font-size="13" fill="#42b983">男</text>
          <text x="120" y="20" font-size="13" fill="#ffb300">女</text>
        </svg>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 推荐使用 axios，如未安装可用 fetch
// import axios from 'axios'

// 总览数据
const overview = ref({
  totalUsers: 0,
  activeDevices: 0
})

// 设备状态分布
const deviceStatus = ref({ normal: 0, idle: 0 })

// 用户数据
const users = ref([])

// 设备数据
const devices = ref([])

// 用户年龄性别分布
const ageGenderGroups = ref([])

onMounted(async () => {
  try {
    // ----------------------
    // 1. 平台核心指标数据接口
    // ----------------------
    const res0 = await fetch('http://47.108.221.119:5000/overview')
    /**
     * @功能：获取平台核心运营指标
     * @返回数据结构：
     * {
     *   totalUsers: number,       // 总用户数（必填）
     *   totalActiveDevices: number // **总活跃设备数**（非时间限定，必填）
     * }
     * @用途：
     * - totalUsers：用于首页「总用户数」卡片展示
     * - totalActiveDevices：用于「活跃设备」卡片展示（总活跃量，非本月数据）
     */
    overview.value = await res0.json()

    // ----------------------
    // 2. 设备状态分布接口（保持不变）
    // ----------------------
    const resStatus = await fetch('http://47.108.221.119:5000/status-distribution')
    /**
     * @功能：获取智能健身衣设备的状态比例（同前）
     */
    deviceStatus.value = await resStatus.json()

    // ----------------------
    // 3. 用户年龄性别分布接口（保持不变）
    // ----------------------
    const res2 = await fetch('http://47.108.221.119:5000/age-gender-distribution')
    /**
     * @功能：获取按年龄分组的用户性别分布数据（同前）
     */
    ageGenderGroups.value = await res2.json()
  } catch (error) {
    console.error('数据加载失败:', error)
  }
})
</script>


<style scoped>
.home-dashboard { padding: 2rem; max-width: 1200px; margin: 0 auto; }
.overview-grid { display: flex; gap: 1.5rem; margin-bottom: 2rem; }
.overview-item { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px #eee; padding: 1.2rem 2rem; flex: 1; min-width: 180px; }
.overview-title { font-size: 1.1rem; color: #888; margin-bottom: 0.3rem; }
.overview-value { font-size: 2rem; font-weight: bold; }
.growth { color: #42b983; font-size: 1.1rem; margin-left: 0.5rem; }
.overview-desc { font-size: 0.95rem; color: #aaa; }
.charts-row { display: flex; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.chart-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px #eee; padding: 1.2rem 1.5rem; flex: 1; min-width: 260px; position: relative; }
.chart-title { font-size: 1.08rem; font-weight: bold; margin-bottom: 0.7rem; }
.pie-legend { font-size: 0.98rem; margin-bottom: 0.5rem; display: flex; flex-direction: column; gap: 2px; }
.bar-group { margin-top: 0.5rem; }
.bar-label { font-size: 0.98rem; margin-top: 0.3rem; }
.bar-bar { background: #eee; border-radius: 6px; height: 14px; margin-bottom: 0.2rem; overflow: hidden; position: relative; }
.bar-inner { height: 100%; border-radius: 6px; }
.bar-value { position: absolute; right: 5px; top: -20px; font-size: 0.9rem; color: #888; }
.alarm-list { margin-top: 0.7rem; }
.alarm-item { background: #f6f8fa; border-radius: 6px; padding: 0.7rem 1rem; margin-bottom: 0.7rem; }
.alarm-item.high { border-left: 5px solid #ff5252; }
.alarm-item.medium { border-left: 5px solid #ffb300; }
.alarm-item.low { border-left: 5px solid #42b983; }
.alarm-title { font-weight: bold; margin-bottom: 0.2rem; }
.alarm-desc { font-size: 0.97rem; color: #666; }
.alarm-time { font-size: 0.92rem; color: #aaa; margin-top: 0.2rem; }
.view-all { float: right; color: #42b983; font-size: 0.98rem; cursor: pointer; }
</style>
